<template>
	<view v-if="value" class="distributionCommonPopup" @click.stop="maskClosePopup" @touchmove.stop.prevent>
		<view class="distributionCommonPopup-main" @click.prevent.stop>
			<view class="distributionCommonPopup-main-content">
				<view class="distributionCommonPopup-main-content-title">
					<view class="distributionCommonPopup-main-content-title-left" :class="{ title: isTitle }">
						<text>{{ title }}</text>
					</view>

					<view class="distributionCommonPopup-main-content-title-right">
						<image :src="closeIcon" @click.stop="maskClosePopup" />
					</view>
				</view>

				<view>
					<slot />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const closeIcon = Object.freeze(require('@/static/icon/icon_tcin_close.png'));

export default {
	name: 'DistributionCommonPopup',

	props: {
		value: {
			type: Boolean,
			default: false
		},

		title: {
			type: String
		},

		disabled: {
			type: Boolean,
			default: false
		}
	},

	data() {
		return {
			closeIcon
		};
	},

	computed: {
		isTitle() {
			const { title } = this;

			return !!title.replace(/\s/g, '');
		}
	},

	methods: {
		maskClosePopup() {
			const { disabled } = this;

			if (disabled) {
				return;
			}

			this.$emit('input', false);
		}
	}
};
</script>

<style lang="scss" scoped>
.distributionCommonPopup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);

	&-main {
		position: absolute;
		top: 50%;
		left: 50%;
		height: auto;
		overflow: hidden;
		width: calc(100vw - 148rpx);

		border-radius: 24rpx;
		transform: translate(-50%, -50%);
		background: linear-gradient(180deg, #ffe0ce 0%, #fff3ec 25%, #ffffff 58%, #ffffff 100%);

		&-content {
			width: 100%;
			height: 100%;

			padding: 32rpx 0;

			position: relative;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				width: 280rpx;
				height: 260rpx;
				opacity: 0.08;
				border-radius: 50%;
				transform: translate(-30%, -30%);

				background: linear-gradient(48deg, rgba(255, 160, 31, 0) 0%, #ff6e20 100%);
			}

			&::after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				z-index: -1;
				width: 320rpx;
				height: 300rpx;
				opacity: 0.3;
				border-radius: 50%;
				transform: translate(30%, -30%);

				background: linear-gradient(132deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
			}

			&-title {
				height: 60rpx;
				padding: 0 32rpx;
				position: relative;

				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				&-left {
					color: #333;
					font-size: 44rpx;
					font-weight: bold;
					line-height: 60rpx;
					padding: 0 16rpx;
					position: relative;

					&.title {
						&::before {
							content: '';
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							height: 26rpx;
							background: rgba(255, 107, 17, 0.8);
						}

						text {
							position: relative;
						}
					}
				}
			}
		}
	}
}
</style>
